<template>
    <div>
        <div class="char_content">
            <!-- 柱状图 -->
            <div class="bar" ref="barChart" style="width: 600px; height: 400px;"></div>
            <!-- 南丁格尔图 -->
            <div class="area" ref="areaChart" style="width: 600px; height: 400px;"></div>
        </div>

        <div class="btn">
            <el-button class="b1" @click="findCountData('login')" type="primary">查看登录量报表</el-button>
            <el-button class="b2" @click="findCountData('notice')" type="primary">查看信息量报表</el-button>
            <el-button class="b3" @click="findCountData('apply')" type="primary">查看业务量报表</el-button>
        </div>
    </div>

</template>

<script>
import * as echarts from 'echarts';
import { loadCount } from '../api/chars.js'

export default {
    name: 'Chars',
    mounted() {
        this.initBarChart();
        this.initAreaChar();
    },
    data() {
        return {
            barData: [0, 0, 0, 0, 0, 0, 0],
            areaData: [0, 0, 0, 0, 0, 0, 0],
            param: {
                statementKey: 'login'
            }
        }
    },

    created() {
        this.findDataCountHandler()
    },

    methods: {
        findCountData(key) {
            // console.log('====', key);
            this.param.statementKey = key
            this.findDataCountHandler()
        },

        initBarChart() {
            const chart = echarts.init(this.$refs.barChart);
            const option = {
                title: {
                    text: '柱状图'
                },
                tooltip: {},
                xAxis: {
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {},
                series: [{
                    name: '数据量',
                    type: 'bar',
                    data: this.barData
                }]
            };
            chart.setOption(option);
        },

        findDataCountHandler() {
            loadCount(this.param).then(res => {
                const arr = res.data.map(item => item.dataCount)
                // console.log('接口响应', arr);                

                this.barData = arr
                this.initBarChart()

                this.areaData = arr
                this.initAreaChar()
            })
        },

        initAreaChar() {
            const chart = echarts.init(this.$refs.areaChart);
            const option = {
                title: {
                    text: '南丁格尔图'
                },
                series: [
                    {
                        type: 'pie',
                        data: [
                            {
                                value: this.areaData[0],
                                name: '周一'
                            },
                            {
                                value: this.areaData[1],
                                name: '周二'
                            },
                            {
                                value: this.areaData[2],
                                name: '周三'
                            },
                            {
                                value: this.areaData[3],
                                name: '周四'
                            },
                            {
                                value: this.areaData[4],
                                name: '周五'
                            },
                            {
                                value: this.areaData[5],
                                name: '周六'
                            },
                            {
                                value: this.areaData[6],
                                name: '周日'
                            }
                        ],
                        roseType: 'area'
                    }
                ]
            };
            chart.setOption(option);
        }
    },

}
</script>

<style>
.char_content {
    display: flex;
    justify-content: space-between;

    .bar {
        /* background-color: red; */
        margin: 0 auto;
        width: 100%;
    }

    .area {
        /* background-color: yellow; */
        margin: 0 auto;
        width: 100%;
    }
}

.btn {
    margin-top: 150px;
    display: flex;
    justify-content: space-between;

    .b1 {
        margin: 0 auto;
    }

    .b2 {
        margin: 0 auto;
    }

    .b3 {
        margin: 0 auto;
    }
}
</style>